<template>
    <div class="swiper-container" ref="mySwiper">
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
export default {
    name: "swiper",
    mounted() {
        new Swiper (this.$refs.mySwiper, {
			loop: true, // 循环模式选项
			autoplay: { // 可选选项，自动滑动
				disableOnInteraction: false,
            },
            autoHeight: true,
			delay: 2000,// 2秒切换一次
			speed: 800, // 切换速度
			effect: 'fade', // "fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）
			fadeEffect: {
			    crossFade: true,
			},
			// 如果需要分页器
			pagination: {
			  el: '.swiper-pagination',
			  clickable: true
			},
			// 
			observer:true,
			observeParents:true,
		});
    },
}
</script>

<style scoped>
@media screen and (min-width:768px) {
	.swiper-container {
		width: 100%;
		min-height: 180px;
		max-height: 458px;
	}
}
@media screen and (min-width:425px) and (max-width:768px) {
	.swiper-container {
		width: 100%;
		min-height: 180px;
		max-height: 345px;
	}
}
@media screen and (max-width:425px) {
	.swiper-container {
		width: 100%;
		min-height: 180px;
	    max-height: 180px;
	}
}
</style>